<template>
  <a-upload
      v-model:file-list="fileList"
      name="file"
      :customRequest="handleUpload"
      @change="handleChange"
      :showUploadList="false"
  >
<!--    <v-btn prepend-icon="mdi-upload" variant="outlined">-->
<!--      上传图片-->
<!--    </v-btn>-->
    <slot/>
  </a-upload>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import type { UploadChangeParam } from 'ant-design-vue';
import {useUtilsUploadFileToOSS} from "~/utils/FileUtils";
const fileList = ref<any[]>([]);
const loading = ref<boolean>(false);
const imageUrl = defineModel()
const handleUpload=async () => {
  // const result = await useUtilsUploadFileToOSS(fileList.value[fileList.value.length-1].originFileObj, 'image')
  const result=URL.createObjectURL(fileList.value[fileList.value.length-1].originFileObj)
  console.log(result)
  loading.value=false
  imageUrl.value=result as string
  //更新上传状态
  fileList.value[fileList.value.length-1].status = 'done'
}

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};


</script>

